<template>
  <div class="content" v-loading="loading">
    <!--头部-->
    <div class="header-setting">
      <a-breadcrumb class="breadcrumb">
        <a-breadcrumb-item>
          <a href="../main">首页</a>
        </a-breadcrumb-item>
        <a-breadcrumb-item>系统设置</a-breadcrumb-item>
        <a-breadcrumb-item>活动管理</a-breadcrumb-item>
      </a-breadcrumb>
      <!--查询条件-->
      <div class="box-condition-body">
        <!--                <div class="box-condition-item" style="padding-top: 20px;">
                    <div style="margin: 0 50px">时间</div>
                    <template>
                        <div class="button_time">
                            <a-button type="primary" @click="button_time(0)" :style="computedStyle(0)">今天</a-button>
                            <a-button type="primary" @click="button_time(1)" :style="computedStyle(1)">昨天</a-button>
                            <a-button type="primary" @click="button_time(2)" :style="computedStyle(2)">本周</a-button>
                            <a-button type="primary" @click="button_time(3)" :style="computedStyle(3)">上周</a-button>
                            <a-button type="primary" @click="button_time(4)" :style="computedStyle(4)">本月</a-button>
                        </div>
                    </template>
                    <template>
                        <div style="margin: auto 50px">
                            <a-range-picker
                                    id="range-picker"
                                    :showTime="{
                                        format: 'HH:mm:ss'
                                    }"
                                    format="YYYY-MM-DD HH:mm"
                                    :placeholder="['开始时间', '结束时间']"
                                    @ok="onOk"
                                    @change="onChange"
                                    :value="rangePickerValue()"/>
                        </div>
                    </template>
                </div>-->
        <div class="box-condition-item" style="padding-top: 20px">
          <div
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
            "
          >
            <div style="margin: 0 15px 0 50px">活动名称</div>
            <template>
              <a-input-search
                placeholder="活动名称"
                style="width: 200px"
                @change="delayedTime"
                v-model="searchName"
              />
            </template>
          </div>
          <div
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
            "
          >
            <div style="margin: 0 15px 0 50px">活动类型</div>
            <template>
              <a-select
                showSearch
                placeholder="活动类型"
                optionFilterProp="children"
                style="width: 200px"
                :allowClear="allowClear"
                @select="selectActivitiesType"
              >
                <a-select-option
                  v-for="p in activitiesTypeOption"
                  :key="p.value"
                  :value="p.value"
                  >{{ p.label }}
                </a-select-option>
              </a-select>
            </template>
          </div>
          <div
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
            "
          >
            <div style="margin: 0 15px 0 50px">活动状态</div>
            <template>
              <a-select
                showSearch
                placeholder="活动状态"
                optionFilterProp="children"
                style="width: 200px"
                :allowClear="allowClear"
                @select="selectIsValidType"
              >
                <a-select-option
                  v-for="p in isValidOption"
                  :key="p.value"
                  :value="p.value"
                  >{{ p.label }}
                </a-select-option>
              </a-select>
            </template>
          </div>
        </div>
      </div>
    </div>

    <!--表单-->
    <div class="box-form">
      <!--工具栏-->
      <div class="box-tool">
        <div></div>
        <div style="display: flex">
          <a-button type="primary" @click="addTap()">添加活动</a-button>
        </div>
      </div>

      <!--数据表格-->
      <div class="box-table">
        <a-table
          :columns="columns"
          rowKey="id"
          :dataSource="dataSource"
          :pagination="pagination"
          bordered
          size="small"
          :scroll="scroll"
          :customRow="customRow"
          :rowClassName="setRowClassName"
          @change="tableChange"
        >
          <template slot="activitiesType" slot-scope="text">
            <template v-if="text == 1"> 满减折扣类 </template>
            <template v-else> 充值赠送类 </template>
          </template>
          <template slot="isValid" slot-scope="text">
            <template v-if="text == 1">
              <font style="color: #00ff00"> 启用</font>
            </template>
            <template v-else>
              <font style="color: #ff0000"> 禁用</font>
            </template>
          </template>

          <template slot="cId" slot-scope="text, record">
            <template v-if="text != null">
              <a-popconfirm
                title="确认删除？"
                okText="确认"
                cancelText="取消"
                @confirm="deleteOk(text)"
                placement="topLeft"
              >
                <a-button type="danger" style="margin-right: 0.05rem"
                  >删除</a-button
                >
              </a-popconfirm>
              <a-button
                type="primary"
                @click="settingRule(record)"
                style="margin-right: 0.05rem"
                >活动规则</a-button
              >
            </template>
          </template>
        </a-table>
      </div>
    </div>
    <!-- 弹窗 -->
    <a-modal
      :title="title"
      v-model="dispatchPopupData.visible"
      :confirmLoading="dispatchPopupData.loading"
      @cancel="
        () => {
          this.hideDispatchPopup();
        }
      "
      @ok="addOrUpdateActivities"
    >
      <a-row style="margin-top: 0.5em">
        <a-col :span="6">活动名称</a-col>
        <a-col :span="16">
          <a-input
            style="width: 70%"
            placeholder="活动名称"
            v-model="activitiesName"
          />
        </a-col>
      </a-row>

      <a-row style="margin-top: 0.5em">
        <a-col :span="6">活动有效时间</a-col>
        <!-- @ok="onOkPop" -->
        <a-col :span="16">
          <a-range-picker
            id="range-picker"
            :showTime="{
              format: 'HH:mm:ss',
            }"
            format="YYYY-MM-DD HH:mm:ss"
            :placeholder="['开始时间', '结束时间']"
            @ok="onOkPop"
            @change="onChangePop"
            :value="rangePickerValuePop()"
          />
        </a-col>
      </a-row>

      <a-row style="margin-top: 0.5em">
        <a-col :span="6">活动类型</a-col>
        <a-col :span="16">
          <a-select
            style="width: 70%"
            v-model="activitiesType"
            :options="activitiesTypeOption"
            placeholder="活动类型"
          />
        </a-col>
      </a-row>
      <a-row style="margin-top: 0.5em">
        <a-col :span="6">活动状态</a-col>
        <a-col :span="16">
          <a-select
            style="width: 30%"
            v-model="isValid"
            :options="isValidOption"
            placeholder="活动状态"
          />
        </a-col>
      </a-row>
    </a-modal>
  </div>
</template>

<script>
import moment from "moment";
// import CommonApi from '../../api/CommonApi';
import apiMarkeing from "../../api/system/MarketingActivities";
// 标题行
const columns = [
  {
    title: "序号",
    dataIndex: "no",
    width: "5%",
  },
  {
    title: "活动名称",
    dataIndex: "activitiesName",
    width: "10%",
  },
  {
    title: "活动类型",
    dataIndex: "activitiesType",
    scopedSlots: { customRender: "activitiesType" },
    width: "8%",
  },
  {
    title: "活动起始时间",
    dataIndex: "startTime",
    width: "10%",
  },
  {
    title: "活动结束时间",
    dataIndex: "endTime",
    width: "10%",
  },
  {
    title: "状态",
    dataIndex: "isValid",
    scopedSlots: { customRender: "isValid" },
    width: "10%",
  },
  {
    title: "创建时间",
    dataIndex: "createdTime",
    width: "10%",
  },
  {
    title: "操作",
    dataIndex: "id",
    scopedSlots: { customRender: "cId" },
    width: "10%",
  },
];

const dataSource = [];

const queryCondition = {
  limit: "100",
  curr: "1",
  activitiesName: "",
  activitiesType: "",
  timeScreenCondition: "6",
  startTimeStamp: "",
  endTimeStamp: "",
};

export default {
  name: "markeingActivities",
  data() {
    return {
      /**表格**/
      columns: columns,
      dataSource: dataSource,
      /*分页插件*/
      pagination: {
        showTotal: (total) => `共${total}条`,
        total: 0,
        current: 1,
        defaultCurrent: 1,
        showQuickJumper: true,
        defaultPageSize: 100,
      },
      /*表格固定头部*/
      scroll: {
        y: 550,
      },
      tableState: {
        rowId: -1,
      },
      allowClear: true,
      /*当前选中的行数据*/
      currRowData: "",
      /**按钮**/
      /*收费时间按钮*/
      selectId: -1,
      selectIdPop: -1,
      /**日期控件**/
      /*时间日期*/
      momentArr: [],
      momentArrPop: [],
      /**文本框**/
      activitiesTypeOption: [
        { value: 0, label: "充值赠送类" },
        { value: 1, label: "满减折扣类" },
      ],
      isValidOption: [
        { value: 0, label: "禁用" },
        { value: 1, label: "启用" },
      ],
      title: "添加活动",
      searchName: "",
      searchType: "",
      searchIsValid: "",
      queryCondition,
      id: "",
      activitiesName: "",
      activitiesType: 0,
      isValid: 0,
      startTime: "",
      endTime: "",
      expandedKeys: [],
      selectedKeys: [],
      /* 弹窗 */
      dispatchPopupData: {
        visible: false,
        loading: false,
      },
      loading: false,
      timer: null,
    };
  },

  methods: {
    /**组件部分相关方法**/
    tableChange(page) {
      this.queryCondition.curr = page.current;
      this.queryData();
      this.queryCondition.curr = 0;
    },
    customRow(record) {
      return {
        on: {
          // 事件
          // click: () => {
          //     this.deleteName=record.name;
          //     this.deleteId=record.id;
          // },
          // 双击点击行
          dblclick: () => {
            this.updateMarketing(record);
          },
        },
      };
    },
    setRowClassName(record) {
      return record.id === this.tableState.rowId ? "clickRowStyl" : "";
    },

    /**按钮以及日期控件**/
    button_time(e) {
      this.selectId = e;
      let momentStart;
      let momentEnd;
      switch (e) {
        case 0:
          momentStart = moment().startOf("day");
          momentEnd = moment().endOf("day");
          break;
        case 1:
          momentStart = moment().add("day", -1).startOf("day");
          momentEnd = moment().add("day", -1).endOf("day");
          break;
        case 2:
          momentStart = moment().week(moment().week()).startOf("week");
          momentEnd = moment().week(moment().week()).endOf("week");
          break;

        case 3:
          momentStart = moment()
            .week(moment().week() - 1)
            .startOf("week");
          momentEnd = moment()
            .week(moment().week() - 1)
            .endOf("week");
          break;
        case 4:
          momentStart = moment().month(moment().month()).startOf("month");
          momentEnd = moment().month(moment().month()).endOf("month");
          break;
        default:
          break;
      }
      this.momentArr[0] = momentStart;
      this.momentArr[1] = momentEnd;
      this.queryData();
    },

    clearSelect() {
      this.currRowData = "";
      this.tableState.rowId = "";
    },

    /* ---------------------- 条件筛选 ---------------------- */
    onChange(dates) {
      this.momentArr = dates;
    },
    onOk(value) {
      this.momentArr = value;

      this.queryData();
    },
    onChangePop(dates) {
      this.momentArrPop = dates;
    },
    onOkPop(value) {
      this.momentArrPop = value;
      if (this.momentArrPop != undefined && this.momentArrPop.length != 0) {
        this.startTime = this.setTime(this.momentArrPop[0]);
        this.endTime = this.setTime(this.momentArrPop[1]);
      }
    },

    rangePickerValue() {
      return this.momentArr;
    },
    rangePickerValuePop() {
      return this.momentArrPop;
    },
    setTime(fmt) {
      const time = new Date(fmt);
      const Y = time.getFullYear();
      const M = (time.getMonth() + 1).toString().padStart(2, "0");
      const D = time.getDate().toString().padStart(2, "0");
      const h = time.getHours().toString().padStart(2, "0");
      const m = time.getMinutes().toString().padStart(2, "0");
      const s = time.getSeconds().toString().padStart(2, "0");
      return `${Y}-${M}-${D} ${h}:${m}:${s}`;
    },

    selectActivitiesType(value) {
      this.searchType = value;
      this.queryData();
    },
    /*selectActivitiesTypeChange(value) {
              if (value == undefined || value == '') {
                this.searchType = "";
                this.queryCondition.curr = 1;
                this.queryData();
              }
            },*/
    selectIsValidType(value) {
      this.searchIsValid = value;
      this.queryData();
    },
    /*  selectIsValidTypeChange(value) {
              if (value == undefined || value == '') {
                this.searchIsValid = null;
                this.queryCondition.curr = 1;
                this.queryData();
              }
            },*/
    settingRule(obj) {
      let _this = this;
      _this.$router.push({
        path: "/marketing/getRuleList",
        query: { id: obj.id, activitiesName: obj.activitiesName },
      });
      // window.open(routerJump.href, '_blank');
    },
    /** 操作相关(crud) **/
    queryData() {
      this.loading = true;
      let condition = this.getQueryCondition();
      apiMarkeing
        .getList(condition)
        .then((data) => {
          let { list, total, pageNum, pageSize } = data.data;
          let array = list || [];
          array = array.map((item, index) => {
            return { ...item, no: total - (pageNum - 1) * pageSize - index };
          });
          this.dataSource = array;
          this.pagination.total = total;
          this.pagination.current = pageNum;
          this.loading = false;
        })
        .catch((err) => {
          console.log("获取列表异常！", err);
          this.loading = false;
        });
    },
    addTap() {
      this.dispatchPopupData.visible = true;
      this.dispatchPopupData.loading = false;
      this.title = "添加活动";
      this.id = "";
      this.activitiesName = "";
      this.activitiesType = 1;
      this.isValid = 0;
      this.startTime = "";
      this.endTime = "";
      this.momentArrPop[0] = null;
      this.momentArrPop[1] = null;
    },
    updateMarketing(record) {
      this.title = "修改活动";
      this.id = record.id;
      this.activitiesName = record.activitiesName;
      this.activitiesType = record.activitiesType;
      this.isValid = record.isValid;
      this.startTime = record.startTime;
      this.endTime = record.endTime;
      this.momentArrPop[0] = record.startTime;
      this.momentArrPop[1] = record.endTime;
      this.dispatchPopupData.visible = true;
      this.dispatchPopupData.loading = false;
    },

    getQueryCondition() {
      let condition = this.queryCondition;
      let startTimeStamp = "";
      let endTimeStamp = "";
      condition.activitiesName = this.searchName;
      condition.activitiesType = this.searchType;
      condition.isValid = this.searchIsValid;
      if (this.momentArr != undefined && this.momentArr.length != 0) {
        condition.timeScreenCondition = "6";
        startTimeStamp = new Date(this.momentArr[0]).getTime() / 1000;
        endTimeStamp = new Date(this.momentArr[1]).getTime() / 1000;
      } else {
        condition.timeScreenCondition = "0";
      }
      condition.startTimeStamp = startTimeStamp;
      condition.endTimeStamp = endTimeStamp;
      return condition;
    },
    hideDispatchPopup() {
      this.dispatchPopupData.visible = false;
      this.id = "";
      this.activitiesName = "";
      this.activitiesType = null;
      this.isValid = null;
    },

    addOrUpdateActivities() {
      let condition = {};
      //名称
      let activitiesName = this.activitiesName;
      let activitiesType = this.activitiesType;
      let isValid = this.isValid;
      let startTime = this.startTime;
      let endTime = this.endTime;
      // let parkId=this.selectParkIds;
      if (activitiesName == "" || activitiesName == undefined) {
        return this.$message.warn("活动名称不能为空!");
      }
      if (startTime == "" || startTime == undefined) {
        return this.$message.warn("活动有效时间开始不能为空!");
      }
      if (endTime == "" || endTime == undefined) {
        return this.$message.warn("活动有效时间结束不能为空!");
      }
      condition.id = this.id;
      condition.activitiesName = activitiesName;
      condition.activitiesType = activitiesType;
      condition.isValid = isValid;
      condition.startTime = startTime;
      condition.endTime = endTime;
      this.dispatchPopupData.loading = true;
      apiMarkeing
        .addOrUpdateActivities(condition)
        .then((data) => {
          if (data.code === 2000) {
            this.$message.success("操作成功");
            this.queryData();
            this.hideDispatchPopup();
          }
          this.dispatchPopupData.visible = false;
        })
        .catch((err) => {
          console.log("失：" + err);
          this.$message.warn("操作失败");
          this.dispatchPopupData.visible = false;
        });
    },
    deleteOk(id) {
      let con = {};
      con.id = id;
      apiMarkeing
        .deleteActivities(con)
        .then((res) => {
          if (res.code === 2000) {
            this.$message.success("删除成功");
            this.queryData();
          }
        })
        .catch((err) => {
          console.log(err);
          this.$message.warn("删除失败");
        });
    },
    onExpand(keys) {
      console.log("onExpand", keys);
      // if not set autoExpandParent to false, if children expanded, parent can not collapse.
      // or, you can remove all expanded children keys.
      this.expandedKeys = keys;
      this.autoExpandParent = false;
    },
    delayedTime() {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(this.queryData, 800);
    },
  },

  computed: {
    computedStyle() {
      return function (selectId) {
        return this.selectId == selectId ? "" : "";
      };
    },
  },

  /*页面初始化渲染后执行*/
  mounted() {
    this.button_time(0);
  },
};
</script>

<style scoped>
.ant-table td {
  white-space: nowrap;
}

.content {
  width: 100%;
  height: 100%;
}

.header-setting {
  width: 100%;
  height: 174px;
  background: #fff;
}

.header-setting .breadcrumb {
  margin-left: 41px;
  padding-top: 15px;
}

/*表格行选中背景颜色*/
.clickRowStyl {
  background-color: #c1e0fd;
}

.box-condition-body {
  padding-left: 40px;
  padding-right: 40px;
  background: #fff;
}

.box-condition-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.button_time {
  margin-left: 100px;
  display: flex;
}

.button_time button {
  margin-right: 10px;
}

/* 表单 */
.box-form {
  padding-left: 40px;
  padding-right: 40px;
  min-height: 705px;
  background: #fff;
  margin-top: 8px;
}

.box-form .box-tool {
  padding-top: 11px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.box-form .box-table {
  margin-top: 12px;
}

.box-tool button {
  margin: 0 0 0 10px;
}

/*轮播*/
.modalBox {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.modalBox .playImg {
  position: relative;
  width: 60%;
}

.modalBox .fromBox {
  width: 35%;
}

.modalBox .fromBox input {
  margin-bottom: 15px;
}

.modalBox .playImg ul.imgList {
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
}

.modalBox .playImg .img {
  width: 100%;
  height: 200px;
}

.modalBox .playImg .img img {
  display: block;
  width: 100%;
  height: 100%;
}

.modalBox .playImg .pointBox {
  position: absolute;
  bottom: 10px;
  width: 100%;
}

.modalBox .playImg .pointBox ul {
  display: flex;
  justify-content: center;
}

.modalBox .playImg .pointBox li.point {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 50%;
  margin: 0 10px;
  background: #000;
}

.modalBox .playImg .pointBox li.active {
  background: #ff7255;
}

.array {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  opacity: 1;
  position: absolute;
  font-size: 30px;
}

.array .left,
.array .right {
  color: #fafafa;
  cursor: pointer;
}

/*.array .right{color:#999;cursor:pointer}*/
.array .left:hover {
  color: #333;
}

.array .right:hover {
  color: #333;
}

/* box-correction-popup */
.box-correction-popup {
  padding: 20px;
  height: 555px;
  /* flex */
  display: flex;
  align-items: center;
}

.box-correction-popup .box-image {
  padding: 0 15px;
  width: 888px;
  height: 500px;
}

.box-correction-popup .box-image .icon-image {
  width: 100%;
  height: 100%;
}

.box-correction-popup .box-correct {
  margin: 0 15px;
  width: 310px;
  height: 500px;
}

.box-correction-popup .box-correct .item-correct {
  margin-top: 20px;
  display: flex;
  align-items: center;
}

.box-correction-popup .box-correct .item-correct .text-correct {
  font-weight: 300;
  font-size: 14px;
  width: 100px;
}

.box-correction-popup .box-correct .item-correct .text-value {
  font-weight: 300;
  font-size: 14px;
  line-height: 1.428571429;
  color: #020202;
}

/* box-dispatch-item */
.box-dispatch-item {
  display: flex;
  align-items: center;
}

.box-dispatch-item .text-key {
  width: 200px;
  /* text */
  font-size: 14px;
  font-weight: 300;
  color: #797979;
}

.box-dispatch-item .text-value {
  width: 265px;
}
</style>
